<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    // 1.给元素指定属性ref='XXX'   2.通过this.$refs.XXX获取
    // 组件也可以用refs获取
    let tmpComponent={
        template:`<div>
            我是子组件    
        </div>`
    }
    /**
     * $属性： $refs 获取组件内的元素
     * $parent:获取当前组件的父组件
     * $children:获取子组件
     * $root:获取new Vue的实例
     * 
    */
    Vue.component('tmp',tmpComponent)
    let App={
        template:`<div>
            <tmp ref='tmp'/>
            <button ref='btn' @click='clickMe'>点击我</button>    
        </div>`,
        beforeCreate(){
            console.log(this.$refs.btn)
        },
        created(){
            console.log(this.$refs.btn)
        },
        beforeMount(){
            console.log(this.$refs.btn)
        },
        mounted(){
            console.log(this.$refs.btn)             //获取当前页面的DOM节点
            console.log(this.$refs.tmp.$el)         //获取组件的DOM节点
        },
        methods:{
            clickMe(){
                console.log(this.$refs.btn)
            }
        }
    }

    new Vue({
        el:'#app',
        template:`<app/>`,
        components:{app:App}
    })
</script>
</html>